<template>
    <div
        class="image-cover"
        :class="{ ld: !loading }"
        :style="{
            '--image-width': width,
            '--image-height': height,
            background: `url(${ thumbnail || image }) center center / cover no-repeat`
        }"
        @click="emits('on-click', [image])"
    >
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义事件
const emits = defineEmits<{
    (event: 'refresh'): void
    (event: 'on-click', value: any): void
}>()

// 接收参数
const props = withDefaults(
    defineProps<{
        thumbnail: string;
        image: string;
    }>(),
    {}
)

// 定义参数
const width   = ref<number>(350)
const height  = ref<string>('400px')
const loading = ref<boolean>(true)

// 加载事件
const onload = () => {
    const image = new Image()
    image.onload = () => {
        emits('refresh')
        width.value   = image.width
        height.value  = image.height + 'px'
        loading.value = false
    }
    image.src = props.thumbnail || props.image
}

onload()
</script>

<style lang="scss" scoped>
.image-cover {
    position: relative;
    width: var(--col-width);
    height: calc(var(--image-height) * var(--col-width) / var(--image-width));
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 2%);
    transform: translateZ(0);
    transition: background .2s;
    &::after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        content: '';
        background: rgb(0 0 0 / 5%);
        border-radius: 12px;
        backdrop-filter: blur(42.5px);
        transition: all .4s;
    }
    &.ld::after {
        background: transparent !important;
        backdrop-filter: blur(0) !important;
    }
}
</style>